<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../libs/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2 ref="one">{{title}}</h2>
      <h2 ref="two">num -- {{num}}</h2>
      <h2>a = {{a}}</h2>
      <h2>b = {{b}}</h2>
      <h2>c = {{c}}</h2>
      <button v-on:click="num++">修改 num</button>
    </div>
    <script>
      var index = 0;
      var data = {
        title: "Vue实例学习",
        num: 1000,
        a: 1,
        b: 200,
        c: "",
      };
      //Object.freeze(data)
      const vm = new Vue({
        data: data,
        methods: {
          log(msg) {
            console.log(`## ${++index} --${msg}`);
          },
        },
        props: {},
        watch: {},
        computed: {},
        components: {},
        filters: {},
        //生命周期
        beforeCreata() {
          console.log(this);
          console.log(`## ${++index} -- beforeCreate 实例创建之前`);
        },
        created() {
          console.log(this.num);
          this.log("create 实例被创建完成");
        },
        beforeMount() {
          console.log(this.$refs.one);
          this.log("beforeMount 实例被载入页面之前");
        },
        mounted() {
          console.log(this.$refs.one);
          this.$refs.one.style.color = "red"; //真实DOM
          this.log("mounted 实例被载入页面完成了");
        },
        beforeUpdate() {
          this.log("beforeUpdate - 实例的数据被修改之前");
        },
        updated() {
          this.log("updated - 实例的数据被修改完成");
        },
        beforeDestroy() {
          this.log("beforeDestroy - 实例被销毁之前");
        },
        destroyed() {
          this.log("destroyed - 实例被销毁完成");
        },
      }).$mount("#app");
      console.log(vm);
      console.log(vm.$data);
      console.log(vm.$el);
    </script>
  </body>
</html>
